<template>
    <SCDialog
        class="mark-dialog"
        v-model="dialogVisible"
        title="文件保存路径"
        :width="580"
        :append-to-body="true"
        :before-close="hideDialog"
    >
        <SCForm
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="160px"
        >
            <SCFormItem label="文件保存路径" prop="path">
                <SCInput v-model="form.path" class="path-input" />
            </SCFormItem>
        </SCForm>
        <template #footer>
            <span class="dialog-footer">
                <SCButton class="mr10" @click="hideDialog">取消</SCButton>
                <SCButton type="primary" @click="submit" :loading="submitLoading">提交</SCButton>
            </span>
        </template>
    </SCDialog>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";

const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    }
});
const emits = defineEmits(["hideDialog", "updateStorePath"]);
const dialogVisible = ref(false);
const submitLoading = ref(false);
const form = reactive({
    path: "", // 默认路径
});
const formRef = ref();
const rules = reactive({
    path: [
        {
            required: true,
            message: "文件路径不能为空!",
            trigger: "change",
        }
    ],
});
const hideDialog = () => {
    dialogVisible.value = false;
    emits("hideDialog");
    formRef.value?.resetFields();
};
const submit = async () => {
    await formRef.value?.validate();
    emits("updateStorePath", form.path);
    emits("hideDialog");
};
watch(() => props.visible, () => {
    dialogVisible.value = props.visible;
});
</script>
<style lang="scss" scoped>
:deep(.path-input){
    width: 300px;
}
</style>